<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>辅导员管理</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      background-color: #f5f6fa;
      padding: 20px;
      margin: 0;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    h2 {
      color: #2c3e50;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid #eee;
    }

    .search-bar {
      display: flex;
      gap: 15px;
      margin-bottom: 30px;
      align-items: center;
      flex-wrap: wrap;
    }

    input[type="text"] {
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      flex: 1;
      min-width: 200px;
      font-size: 14px;
    }

    input[type="text"]:focus {
      border-color: #3498db;
      outline: none;
      box-shadow: 0 0 5px rgba(52,152,219,0.3);
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
    }

    .btn-primary {
      background-color: #3498db;
      color: white;
    }

    .btn-primary:hover {
      background-color: #2980b9;
    }

    .btn-secondary {
      background-color: #95a5a6;
      color: white;
    }

    .btn-secondary:hover {
      background-color: #7f8c8d;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      background-color: white;
    }

    th, td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    th {
      background-color: #f8f9fa;
      color: #2c3e50;
      font-weight: 600;
    }

    tr:hover {
      background-color: #f8f9fa;
    }

    .action-links {
      display: flex;
      gap: 10px;
    }

    .action-links a {
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 14px;
    }

    .edit-link {
      color: #3498db;
    }

    .delete-link {
      color: #e74c3c;
    }

    .no-data {
      text-align: center;
      padding: 20px;
      color: #7f8c8d;
    }

    @media (max-width: 768px) {
      .search-bar {
        flex-direction: column;
      }

      input[type="text"] {
        width: 100%;
      }

      .btn {
        width: 100%;
      }
    }
  </style>
</head>
<body>

<div>
  <div class="container">
    <h2>辅导员管理</h2>

    <div class="search-bar">
      <input type="text" id="searchInst" placeholder="输入辅导员编号或姓名进行搜索">
      <button class="btn btn-primary" onclick="searchInstructorByInstID()">编号搜索</button>
      <button class="btn btn-primary" onclick="searchInstructorByInstName()">名称搜索</button>
      <button class="btn btn-secondary" onclick="fetchInstructors()">重置</button>
      <button class="btn btn-primary" onclick="window.location.href='CM04_instructorForm.jsp'">添加辅导员</button>
    </div>

    <table>
      <thead>
      <tr>
        <th>辅导员编号</th>
        <th>姓名</th>
        <th>所属二级学院</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody id="instructorTableBody">
      </tbody>
    </table>
  </div>

  <script>
  // 获取所有辅导员信息
  function fetchInstructors() {
    axios.get('/api/instructors/list')
            .then(function(response) {
              let instructors = response.data.data;  // 返回响应data字段
              let tableContent = "";  // 表格内容初始化

              $.each(instructors, function(index, instructor) {
                tableContent += "<tr>";
                tableContent += "<td>" + instructor.instID + "</td>";
                tableContent += "<td>" + instructor.instName + "</td>";
                tableContent += "<td>" + instructor.depID + "</td>";
                tableContent += "<td>" + instructor.telephone + "</td>";
                tableContent += "<td>";
                tableContent += '<a href="CM04_instructorForm.jsp?instID=' + instructor.instID  + '">编辑</a> | ';
                tableContent += '<a href="javascript:void(0)" onclick="deleteDepartment(' + instructor.instID + ')">删除</a>';
                tableContent += "</td>";
                tableContent += "</tr>";
              });
              // 插入表格内容
              $('#instructorTableBody').html(tableContent);
            })
            .catch(function(error) {
              console.error("错误:", error);
            });
  }
  // 根据 ID 删除辅导员
  function deleteInstructor(instID) {
    if (instID) {
      if (confirm("确认删除该辅导员吗？")) {
        axios.delete(`/api/instructors/delete/`+instID)
                .then(function(response) {
                  alert(response.data.message);
                  fetchInstructors();  // 刷新列表
                })
                .catch(function(error) {
                  alert("删除失败");
                });
      }
    } else {
      alert("无效的辅导员ID");
    }
  }

  // instID搜索辅导员
  function searchInstructorByInstID() {
    const instID = $('#searchInst').val().trim(); // 获取用户输入的 ID
    console.log("instId=" + instID)
    if (!instID) {
      alert("请输入辅导员编号进行搜索！");
      return;
    }
    // 发起后端请求
    axios.get(`/api/instructors/instID/` + instID)
            .then(function (response) {
              if (response.data.code === 1) { // 判断请求是否成功
                const instructor = response.data.data;
                const instructors = [instructor]; // 将单条记录包装成数组
                let tableContent = ""; // 表格内容初始化

                $.each(instructors, function (index, instructor) {
                  tableContent += "<tr>";
                  tableContent += "<td>" + instructor.instID + "</td>";
                  tableContent += "<td>" + instructor.instName + "</td>";
                  tableContent += "<td>" + instructor.depID + "</td>";
                  tableContent += "<td>" + instructor.telephone + "</td>";
                  tableContent += "<td>";
                  tableContent += '<a href="CM04_instructorForm.jsp?instID=' + instructor.instID + '">编辑</a> | ';
                  tableContent += '<a href="javascript:void(0)" onclick="deleteInstructor(' + instructor.instID + ')">删除</a>';
                  tableContent += "</td>";
                  tableContent += "</tr>";
                });

                // 渲染表格内容
                $('#instructorTableBody').html(tableContent);
              } else {
                alert("未找到该辅导员！");
                $('#instructorTableBody').html(""); // 清空表格
              }
            })
            .catch(function (error) {
              console.error("搜索请求错误:", error);
              alert("搜索失败，请稍后重试！");
            });
  }

    // instName搜索辅导员
    function searchInstructorByInstName() {
      const instName = $('#searchInst').val().trim();
      console.log("instName=" + instName)
      if (!instName) {
        alert("请输入辅导员名字进行搜索！");
        return;
      }
      // 发起后端请求
      axios.get(`/api/instructors/instName/`+instName)
              .then(function (response) {
                if (response.data.code === 1) { // 判断请求是否成功
                  const instructor = response.data.data;
                  const instructors = [instructor]; // 将单条记录包装成数组，便于复用逻辑
                  let tableContent = ""; // 初始化表格内容

                  $.each(instructors, function (index, instructor) {
                    tableContent += "<tr>";
                    tableContent += "<td>" + instructor.instID + "</td>";
                    tableContent += "<td>" + instructor.instName + "</td>";
                    tableContent += "<td>" + instructor.depID + "</td>";
                    tableContent += "<td>" + instructor.telephone + "</td>";
                    tableContent += "<td>";
                    tableContent += '<a href="CM04_instructorForm.jsp?instID=' + instructor.instID + '">编辑</a> | ';
                    tableContent += '<a href="javascript:void(0)" onclick="deleteInstructor(' + instructor.instID + ')">删除</a>';
                    tableContent += "</td>";
                    tableContent += "</tr>";
                  });

                  // 渲染表格内容
                  $('#instructorTableBody').html(tableContent);
                } else {
                  alert("未找到该辅导员！");
                  $('#instructorTableBody').html(""); // 清空表格
                }
              })
              .catch(function (error) {
                console.error("搜索请求错误:", error);
                alert("搜索失败，请稍后重试！");
              });
    }

      window.onload = fetchInstructors;
</script>

</body>
</html>
